/** @jsxImportSource @emotion/react */
import React, { useState, useEffect, useRef } from "react";
import { css } from "@emotion/react";

const KanbanNewCardTitleStyles = css`
min-height: 3rem;
`;
const KanbanCardStyles = css`
margin-bottom: 1rem;
padding: 0.6rem 1rem;
border: 1px solid gray;
border-radius: 1rem;
list-style: none;
background-color: rgba(255, 255, 255, 0.4);
text-align: left;
&:hover {
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.2), inset 0 1px #fff;
}
`;
const kanbanNewCardStyles = css`
          ${KanbanNewCardTitleStyles}
          &>input[type="text"] {
            width: 80%;
          }
        `;
export default function KanbanNewCard({ onSubmit }) {
  const [title, setTitle] = useState("");
  const inputElem = useRef(null);
  useEffect(() => {
    inputElem.current.focus();
  }, []);
  const handleChange = (evt) => {
    setTitle(evt.target.value);
  };
  const handleKeyDown = (evt) => {
    if (evt.key === "Enter") {
      const newCard = {title,status:new Date().toLocaleString()}
      onSubmit(newCard);
    }
  };
  return (
    <li css={KanbanCardStyles}>
      <h3>添加新卡片</h3>
      <div
        css={kanbanNewCardStyles}
      >
        <input
          type="text"
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          ref={inputElem} />
      </div>
    </li>
  );
}
